<template>
  <div class="bottom">
    <ul>
      <li>
        <div class="title">
          <h5>{{ d2.name }}</h5>
          <div v-if="d2.showTime == true">
            <span>{{ hours }}</span> : <span>{{ minutes }}</span> :
            <span>{{ seconds }}</span>
          </div>
          <i class="iconfont icon-youjiantou"></i>
        </div>
        <van-swipe class="my-swipe" @change="onChange">
          <van-swipe-item class="cont" v-for="(i, ind) in d2.detail" :key="ind">
            <div class="item" v-for="(k, kin) in i.banner" :key="kin">
              <img :src="k.proImg" alt="" />
              <p class="newPrice">{{ k.newPrice }}</p>
              <p class="oldPrice">{{ k.oldPrice }}</p>
              <p class="cont">{{ k.cont }}</p>
            </div>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              <ul class="indicBox">
                <li
                  class="li"
                  :class="{ active: jindex == current }"
                  v-for="(j, jindex) in d2.detail.length"
                  :key="jindex"
                ></li>
              </ul>
            </div>
          </template>
        </van-swipe>
        <!-- <ul class="cont">
      <li class="item">
        <img src="../assets/images/two1.jpg" alt="" />
        <p>￥12</p>
        <p class="oldPrice"></p>
      </li>
    </ul> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["d2", "hours", "minutes", "seconds"],
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="less" scoped>
.bottom {
  border-radius: 0px 0px 10px 10px;
  overflow: hidden;
}
.indicBox {
  display: flex;
  .li {
    list-style: none;
    width: 8px;
    height: 2px;
    // margin: 0px 2px;
    margin-right: 5px;
    background: #888;
  }
  .active {
    background: black;
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
}
li {
  width: 100%;
  background-color: #fff;
  margin-bottom: 1px;
  .title {
    padding: 0px 12px;
    height: 40px;
    line-height: 40px;
    display: flex;
    h5 {
      margin-right: 6px;
    }
    span {
      padding: 0px 3px;
      color: white;
      background-color: #000;
      border-radius: 5px;
      font-size: 12px;
    }
    i {
      margin-left: 8px;
      font-size: 13px;
    }
  }
  .my-swipe {
    width: 100%;
    .cont {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0px 12px;
      box-sizing: border-box;
      .item {
        flex: 0 0 25%;
        padding-bottom: 13px;
        overflow: hidden;
        img {
          // width: 55px;
          height: 55px;
          margin: 0 auto;
        }
        p {
          width: 100%;
          font-size: 12px;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: rgb(71, 68, 68);
        }
        .oldPrice {
          color: #a6a6a6;
          text-decoration: line-through;
        }
        .cont {
          width: 100%;
          margin-top: 3px;
        }
      }
    }
  }
}
.brandBuy {
  .title {
    height: 46px;
    line-height: 46px;
  }
  ul {
    li {
      p {
        margin-top: 5px;
      }
    }
  }
}
</style>